<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Zhuang Shao</title>
        <link rel="icon" type="image/icon" href="assets/images/tabicon.ico">

        <link rel="stylesheet" type="text/css" href="">
        <link href="assets/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
        <link href="assets/css/font-awesome.min.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,700i" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,700,700i|Josefin+Sans:700" rel="stylesheet">
        <link href="assets/css/main.css" rel="stylesheet">
        <link rel="icon" href="assets/images/logo.png">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
        
    </head>

    <body style="overflow-y: auto">
        <div id="index">                                           <!-- Index starts here -->
            <div class="container main">
                <div style="height:50px">
                    
                </div>
                <div class="row home">
                    <div id = "index_left" class="col-md-4 left">
                        <div style="height:200px"></div>
                        <div class="btn-group-vertical custom_btn animated slideinleft">
                            <div id="about" class="btn btn-rabbit">About</div>
                            <div id="research" class="btn btn-rabbit">Research</div>
                            <div id="publication" class="btn btn-rabbit">Publication</div>
                            <div id="interest" class="btn btn-rabbit">Interest</div>
                            <div id="contact" class="btn btn-rabbit">Contact</div>
                        </div>
                        <!--
                        <div class="social right text-center">
                            <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                            <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                            <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                        </div>
                        -->
                        <div style="padding-left:80px">
                            <h2>Contact Info</h2>
                            <div class="textwidget">
                                <p class="textpara">
                                    <a href="http://www.seu.edu.cn" target="_blank" rel="noopener">Southeast University</a>
                                    <br>
                                    <a href="http://www.seu.edu.cn" target="_blank" rel="noopener">School of Energy & Environment</a>
                                    <br>                                    
                                </p>
                                <p>No.2 Sipailou Road, Nanjing, 210096, China</p>
                                <p>zhuangshao [at] seu.edu.cn</p>
                            </div>
                        </div>
                        
                    </div>
                    <div id = "index_right" class="col-md-8 text-center right">
                        <h1 style="text-align:left;font-size: 48px;">Zhuang Shao</h1>
                        <div class="logo" style="text-align:left">
                            <!--<img src="assets/images/logo.png">-->
                            <h1>Home</h1>
                        </div>

                        <img class="img-responsive img-rabbit" src="assets/images/homePic.jpg">

                        <p class="home-description">
                            I am a Ph.D student in the School of Energy & Environment at Southeast University.
                        </p>        
                        
                    </div>
                </div>
            </div>
        </div>                                                      <!-- index ends here -->

        <div id="about_scroll" class="pages">                      <!-- about strats here  -->
            <div class="container main">
                <div class="row">
                    <div class="col-md-6 left" id="about_left"  style="margin-top:90px">
                        <img class="img-responsive img-rabbit" src="assets/images/about.jpg">
                    </div>

                    <div class="col-md-6 right" id="about_right">
                        <a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to home </a>
                        <div id="watermark">
                            <h2 class="page-title" text-center>About</h2>
                            <div class="marker">a</div>
                        </div>
                        <p class='subtitle'>Hi, I am ...
                        </p>
                        <p class="info">"About..."</p>  
                    </div>
                </div>
            </div>            
        </div>                                                                <!-- About ends here -->
        
        
        
        <div id="research_scroll" class="pages">                                  <!-- Research starts here -->
            <div class="container main">
                <div class="row">
                    <div class="col-md-6" id="research_left"  style="margin-top:90px">
                        <div id="owl-demo" class="owl-carousel owl-theme">
                            <div class="item"><img class="img-responsive img-rabbit" src="assets/images/research.jpg"></div>
                        </div>
                    </div>

                    <div class="col-md-6" id="work_right">
                        <a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
                        <div id="watermark">
                            <h2 class="page-title" text-center>Research</h2>
                            <div class="marker">w</div>
                        </div>
                        <p class='subtitle'>This is ...
                        </p>
                        <p class="info">There are ...</p>
                    </div>
                </div>
            </div>    
        </div>                                                                 <!-- Research ends here  -->

        <div id="publication_scroll" class="pages">                                  <!-- Publication starts here -->
            <div class="container main">
                <div class="row">
                    <div class="col-md-6" id="publication_left"  style="margin-top:90px">
                        <div id="owl-demo" class="owl-carousel owl-theme">
                            <div class="item"><img class="img-responsive img-rabbit" src="assets/images/publication.jpg"></div>
                        </div>
                    </div>

                    <div class="col-md-6" id="work_right">
                        <a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
                        <div id="watermark">
                            <h2 class="page-title" text-center>Publication</h2>
                            <div class="marker">w</div>
                        </div>
                        <p class='subtitle'>This is ...
                        </p>
                        <p class="info">There are ...</p>
                    </div>
                </div>
            </div>    
        </div>                                                                 <!-- Publication ends here  -->
        
        <div id="interest_scroll" class="pages">                                  <!-- Interest starts here -->
            <div class="container main">
                <div class="row">
                    <div class="col-md-6" id="research_left"  style="margin-top:90px">
                        <div id="owl-demo" class="owl-carousel owl-theme">
                            <div class="item"><img class="img-responsive img-rabbit" src="assets/images/interest.jpg"></div>
                        </div>
                    </div>

                    <div class="col-md-6" id="work_right">
                        <a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
                        <div id="watermark">
                            <h2 class="page-title" text-center>Interest</h2>
                            <div class="marker">w</div>
                        </div>
                        <p class='subtitle'>This is ...
                        </p>
                        <p class="info">There are ...</p>
                    </div>
                </div>
            </div>    
        </div>                                                                 <!-- Interest ends here  -->
        
        <div id="contact_scroll" class="pages">                             <!-- Contact starts here -->
            <div class="container main">
                <div class="row">
                    <div class="col-md-6 left" id="contact_left" style="margin-top:90px">
                        <img class="img-responsive img-rabbit" src="assets/images/contact.jpg">
                    </div>

                    <div class="col-md-6 right" id="contact_right">
                        <a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
                        <div id="watermark">
                            <h2 class="page-title" text-center>Contact</h2>
                            <div class="marker">c</div>
                        </div>
                        <p class='subtitle'>I'm based in Nanjing in the China. Drop me a line.
                        </p>
                        <!-- form -->
                        <form class="form_edit"> 
                            <div class="form-group">
                                <input type="name" class="form-control" id="exampleInputName" placeholder="Name">
                            </div>

                            <div class="form-group">
                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                            </div>

                            <div class="form-group">
                            <textarea class="form-control" rows="5" placeholder="Message"></textarea>
                            </div>
                            <button type="submit" class="btn btn-rabbit submit">Send Message</button>
                        </form>
                    </div>
                </div>
            </div>
       
            <!--<footer class="text-center">
                <div class="container bottom">
                    <div class="row">
                        <div class="col-sm-12">
                            <p>Made with <i class="fa fa-heartbeat" aria-hidden="true"></i> by <a href="#">Themewagon</a> More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
                        </div>
                    </div>
                </div>
            </footer>-->
            
        </div>                                                              <!-- Contact ends here -->
        
        <script src="assets/js/jquery-3.1.0.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script>
            
            $(document).ready(function () {

                $("#about_scroll").fadeOut();
                $("#research_scroll").fadeOut();
                $("#publication_scroll").fadeOut();
                $("#interest_scroll").fadeOut();
                $("#contact_scroll").fadeOut();

                $("#about").click(function () {
                    $("#index").fadeOut();
                    $("#about_scroll").fadeIn();
                    $('#about_left').addClass('animated slideInLeft');
                    $('#about_right').addClass('animated slideInRight');
                });
                $("#research").click(function () {
                    $("#index").fadeOut();
                    $("#research_scroll").fadeIn();
                    $('#research_left').addClass('animated slideInLeft');
                    $('#research_right').addClass('animated slideInRight');
                });
                $("#publication").click(function () {
                    $("#index").fadeOut();
                    $("#publication_scroll").fadeIn();
                    $('#publication_left').addClass('animated slideInLeft');
                    $('#publication_right').addClass('animated slideInRight');
                });
                $("#interest").click(function () {
                    $("#index").fadeOut();
                    $("#interest_scroll").fadeIn();
                    $('#interest_left').addClass('animated slideInLeft');
                    $('#interest_right').addClass('animated slideInRight');
                });
                $("#contact").click(function () {
                    $("#index").fadeOut();
                    $("#contact_scroll").fadeIn();
                    $('#contact_left').addClass('animated slideInLeft');
                    $('#contact_right').addClass('animated slideInRight');
                });

                $(".back").click(function () {                    
                    $(".pages").fadeOut();
                    $("#index").fadeIn();
                    $('#index_left').addClass('animated slideInLeft');
                    $('#index_right').addClass('animated slideInRight');
                });

            });


        </script>
    </body>
</html>
